<template>
    <view>
        <!-- <u-swiper v-if="swiperlist.length > 0" :list="swiperlist" name="img_src"></u-swiper> -->
        <u-swiper v-if="swiperlist.length > 0" :list="swiperlist" name="img_src" mode="number" indicator-pos="bottomRight" height="420" img-mode="scaleToFill"></u-swiper>
        <view class="title">{{ title }}</view>
        <view class="info">
            <view>酒精度：{{ deg }}</view>
            <view>年份：{{ year }}</view>
            <view><u-button size="mini" :custom-style="customStyle" open-type="share">转发分享</u-button></view>
        </view>

        <view class="content"><u-parse :show-with-animation="true" :lazy-load="true" :loading-img="loadingimg" :html="content"></u-parse></view>
        <u-divider margin-top="20" margin-bottom="20">暂时就这些了~</u-divider>
        <customTab :tab="tab"></customTab>
    </view>
</template>

<script>
import customTab from '../../component/customTab/customTab';
export default {
    components: { customTab },
    data() {
        return {
            content: ``,
            title: '',
            swiperlist: [],
            deg: 0,
            year: 0,
            loadingimg: '/static/images/noImage.jpg',
            tab: {
                iconPath: '/static/tabbar/wine.png',
                selectedIconPath: '/static/tabbar/wine.png',
                text: '佳酿集合',
                pagePath: '/pages/product/product',
                customIcon: false
            },
            customStyle: {
                borderColor: '#ffffff',
                color: '#82848a'
            }
        };
    },
    methods: {
        async getDetail(id) {
            let res = await this.$u.api.getProductDetail({ id: id });
            uni.setNavigationBarTitle({
                title: res.product_name
            });

            this.content = res.product_detail;
            this.title = res.product_name;
            this.swiperlist = res.product_logo;
            this.deg = res.product_deg;
            this.year = res.product_year;
        }
    },

    onLoad(options) {
        if (options.id) {
            this.getDetail(options.id);
        }
    }
};
</script>

<style scoped lang="scss">
.title {
    color: rgb(83, 83, 83);
    font-size: 32rpx;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    padding: 20rpx;
    margin-bottom: 20rpx;
}
.info {
    color: $u-type-info-disabled;
    font-size: 24rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20rpx;
}
.content {
    border-top: 1px solid rgba($color: #000000, $alpha: 0.1);
    padding-top: 30rpx;
    padding-left: 15rpx;
    padding-rigth: 15rpx;
    max-width: 100%;
    word-wrap: break-word; /* 只对英文起作用，以单词作为换行依据 */
    white-space: pre-wrap; /* 只对中文起作用，强制换行 */
}
</style>
